<template>
  <view class="container">
    <view class="section">
      <view class="selectd">
        <view class="selectd-left">
          <block v-for="(item, index) in select_title" :key="index">
            <view :class="select_title_id == item.id ? 'actived' : 'active'" @click="selectShops(item.id)">
              {{ item.name }}
            </view>
          </block>
        </view>
        <view class="selectd-right" :style="{ 'border-top-left-radius': select_title_id == 3 ? '0' : '' }">
          <block v-for="(item, index) in shopList" :key="index">
            <view class="selectd-right-item">
              <view class="selectd-right-item-body">
                <view class="selectd-right-item-imgs"
                  @click="$goPath(2, `/pages/premiumBag/goods/goodsDetail?productId=${item.id}`)">
                  <image :src="item.thumbnail" mode="aspectFill" />
                </view>
                <view class="selectd-right-item_content">
                  <view class="selectd-right-item__upper">
                    <view class="selectd-right-item__title"> {{ item.name }} </view>
                  </view>
                  <view class="selectd-right-item__down">
                    <view>
                      <view>￥<text>{{ item.showPrice ? item.showPrice : 0.00 }}</text></view>
                      <view class="line-price">{{ item.linePrice }}</view>
                    </view>
                    <view class="selectd-right-item__down_icon" @click="onCollect(item)">
                      <u-icon :name="item.collect == 1 ? 'heart-fill' : 'heart'" size="45rpx"
                        :color="item.collect == 1 ? '#EA5F5F' : '#BFBFBF'" />
                    </view>
                  </view>
                </view>
              </view>
              <view class="selectd-right-item_line"></view>
            </view>
          </block>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
import { getUserInfo } from '@/common/auth';
import { arrayUnique } from '@/utils/util';

export default {
  data() {
    return {
      userId: getUserInfo().ypdUser?.userId,
      select_title: [],
      shopList: [],
      select_title_id: -1,
      pageCurrent: 1,
      total: 0
    }
  },
  onLoad(options) {
    this.getSelectList();
    this.getShopList();
  },
  methods: {

    async getSelectList() {
      let result = await this.$request.miniAssortList()
      const obj = {
        id: -1,
        name: '全部商品'
      };
      result.data.unshift(obj);
      this.select_title = result.data
    },

    async getShopList() {
      const { select_title_id, userId, pageCurrent } = this;
      const param = {
        page: { current: pageCurrent, size: 20 },
        query: {
          assortId: select_title_id,
          userId
        }
      }
      if (select_title_id == -1) delete param.query.assortId;
      uni.showLoading({ title: '加载中' });
      let result = await this.$request.miniFindByPage(param)
      const { records, total } = result.data;
      const { shopList } = this;
      let newList = arrayUnique(Array.from(new Set([...shopList, ...records])), 'id');
      uni.hideLoading();
      this.shopList = newList
      this.total = total
    },

    selectShops(v) {
      this.select_title_id = v
      this.shopList = []
      this.getShopList();
    },

    onCollect(item) {
      const { userId } = this;
      if (!userId) return this.$toast('您还未登录,请先去登录!')
      const param = {
        productUpId: item.id,
        userId
      }
      if (item.collect == 0 || item.collect == null) {
        this.$request.miniAddCollet(param).then(res => {
          if (res.code == 200) {
            this.getShopList()
            this.$toast('收藏成功!')
          }
        });
      } else {
        this.$request.miniCancelCollet(param).then(res => {
          if (res.code == 200) {
            this.getShopList()
            this.$toast('取消收藏成功!')
          }
        });
      }
    },
  },
}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #F6F6F6;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #fff;
  padding-bottom: 24rpx;
}

.search {
  width: 100%;
  padding: 0 30rpx;
}

.search .t-search__input-container {
  border-radius: 50rpx !important;
  height: 64rpx !important;
}

.search .t-search__input {
  font-size: 28rpx !important;
  color: #666666 !important;
  font-size: 30rpx !important;
  font-weight: bold;
}

.section {
  padding: 24rpx;
  flex: 1;
  overflow: auto;
  padding-bottom: 0;
}

.selectd {
  height: 100%;
  display: flex;
  overflow: auto;
  border-radius: 16rpx 16rpx;
}

.selectd-left {
  width: 190rpx;
  height: 100%;
  overflow-y: auto;
  text-align: center;
  font-size: 30rpx;
  color: #666;
  scrollbar-width: none;
  position: fixed;
  left: 12rpx;
  z-index: 1000;
  background-color: #F6F6F6;
  /* margin-top: 24rpx; */
  box-sizing: border-box;
}

.selectd-left::-webkit-scrollbar {
  display: none;
}

.selectd-left>view {
  line-height: 90rpx;
  border-radius: 20rpx 0 0 20rpx;
}

.actived {
  background-color: #fff;
  color: #32B499;
}

.active {
  background-color: #F6F6F6;
  color: #666666;
}

.selectd .selectd-right {
  flex: 1;
  height: 100%;
  background-color: #fff;
  border-radius: 16rpx 16rpx;
  padding-left: 179rpx;
  padding-bottom: env(safe-area-inset-bottom);
  overflow: scroll;
  box-sizing: border-box;
}

.selectd .selectd-right::-webkit-scrollbar {
  width: 100%;
}

.selectd-right-item {
  padding-top: 24rpx;
  padding-left: 16rpx;
  background-color: #fff;
}

.selectd-right-item_line {
  border: 1rpx solid rgba(241, 241, 241, 0.8);
}

.selectd-right-item_line:last-child {
  border: 0;
}

.selectd-right-item-body {
  width: 100%;
  height: 175rpx;
  border-radius: 0 16rpx 0 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 15rpx;
  border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
}

.selectd-right-item-body:last-child {
  border: 0;
}

.selectd-right-item-imgs {
  flex-shrink: 0;
  position: relative;
  width: 160rpx;
  height: 160rpx;
}

.selectd-right-item-imgs:empty {
  display: none;
  margin: 0;
}

.selectd-right-item-imgs image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8rpx 8rpx !important;
  overflow: hidden;
}

.selectd-right-item_content {
  height: 100%;
  display: flex;
  flex: 1;
  background: #fff;
  padding: 0 24rpx;
  flex-direction: column;
  justify-content: space-between;
}

.selectd-right-item__upper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.selectd-right-item__title {
  flex-shrink: 0;
  font-size: 28rpx;
  color: #333;
  font-weight: 400;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  word-break: break-word;
  line-height: 36rpx;
}

.selectd-right-item__tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 8rpx 0 0 0;
}

.selectd-right-item__tag {
  color: #FF6F40;
  background: transparent;
  font-size: 20rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  border: 1rpx solid #FF6F40;
  padding: 0 8rpx;
  border-radius: 4rpx;
  line-height: 30rpx;
  margin: 0 8rpx 8rpx 0;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  word-break: keep-all;
  text-overflow: ellipsis;
}

.selectd-right-item__down {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #EA5F5F;
  font-size: 28rpx;
}

.selectd-right-item__down view {
  display: flex;
  align-items: flex-end;
}

.selectd-right-item__down .line-price {
  font-size: 24rpx;
  text-decoration: line-through;
  margin-left: 10rpx;
  padding-bottom: 6rpx;
}

.selectd-right-item__down text {
  font-size: 40rpx;
}

.selectd-right-item__down .selectd-right-item__down_icon {
  color: #999999;
}
</style>